<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
	<head>
		<title>编辑魔法盒管理</title>
		<meta name="decorator" content="default"/>
		<script type="text/javascript"  charset="utf-8" src="/dingdingbox/assets/scripts/ueditor/ueditor.config.js"></script>
		<script type="text/javascript"  charset="utf-8"  src="/dingdingbox/assets/scripts/ueditor/ueditor.all.js"></script>		
		<script type="text/javascript">
		$(function() {
			//初始化表单验证
			$("#inputForm").initValidform();
			
			 var options = {
		        		initialFrameWidth:800,
		        		initialFrameHeight:300,
		        		focus:false,
	        };
		        
	        //初始化上传控件
	        $(".upload-img").InitUploader({ type:'box', filesize: "", sendurl: "${ctx}/db/upload", swf: "${ctxStatic}/scripts/webuploader/uploader.swf", filetypes: "" });
	     
		});
		
		//添加图片相册
		function addImage(targetObj, data) {
			targetObj.siblings(".upload-name").val(data.name);
			targetObj.siblings(".upload-path").val(data.path);
			targetObj.siblings(".upload-size").val(data.size);
			
		    //插入到相册UL里面
		    var newLi = $('<li>'
		    + '<input type="hidden" name="hid_photo_name" value="'+ data.type + '|' + data.name + '|' + data.path + '|' + data.thumb + '|' + data.size + '|' + data.ext + '" />'
		    + '<input type="hidden" name="hid_photo_remark" value="" />'
		    + '<div class="img-box" onclick="setFocusImg(this);">'
		    + '<img src="${root}/cdn/image/' + data.thumb + '" bigsrc="${root}/cdn/image/' + data.path + '" />'
		    + '<span class="remark"><i>暂无描述...</i></span>'
		    + '</div>'
		    + '<a href="javascript:;" onclick="setRemark(this);">描述</a>'
		    + '<a href="javascript:;" onclick="delImg(this);">删除</a>'
		    + '</li>');
		    newLi.appendTo(targetObj.siblings(".photo-list").children("ul"));

		    //默认第一个为相册封面
		    var focusPhotoObj = targetObj.siblings(".focus-photo");
		    if (focusPhotoObj.val() == "") {
		        focusPhotoObj.val(thumbSrc);
		        newLi.children(".img-box").addClass("selected");
		    }
		    
		} 
		</script>
	</head>
	
	<body class="mainbody">
		<form:form id="inputForm" modelAttribute="box" action="${ctx}/db/box/save" method="post" class="form-horizontal">
			<form:hidden path="id"/>
			<!--导航栏-->
			<div class="location">
				<a href="${ctx}/db/box/list" class="back"><i></i><span>返回列表页</span></a>
				<a href="${ctx}/center" class="home"><i></i><span>首页</span></a> 
				<i class="arrow"></i> 
				<a href="${ctx}/db/box/form?id=${box.id}"><span>魔法盒管理</span></a>
				<shiro:hasPermission name="db:box:edit"><i class="arrow"></i><span>${not empty box.id ? '修改':'添加' }魔法盒管理</span></shiro:hasPermission>
			</div>	
			<div class="line10"></div>
			<!--/导航栏-->
	
			<!--内容-->
			<div id="floatHead" class="content-tab-wrap">
				<div class="content-tab">
					<div class="content-tab-ul-wrap">
						<ul>
							<li><a class="selected" href="javascript:;">魔法盒管理信息</a></li>
						</ul>
					</div>
				</div>
			</div>
	
			<div class="tab-content">
			
				<dl>
					<dt>图片</dt>
					<dd>
						<div class="upload-box upload-img"></div>
						<div class="photo-list">
							<ul>
								<c:forEach items="${boxAlbum }" var="ca">
	                        	<li>
	                        		<input type="hidden" name="hid_photo_name" value="${ca.category }|${ca.fileName }|${ca.orginPath }|${ca.thumbPath }|${ca.albumSize }|jpg">
	                        		<input type="hidden" name="hid_photo_remark" value="${ca.remarks }">
	                        		<div class="img-box" onclick="setFocusImg(this);">
	                        			<img src="${root}/cdn/image/${ca.thumbPath }" bigsrc="${root}/cdn/image/${ca.orginPath }">
	                        			<span class="remark"><i>${empty ca.remarks ? '暂无描述...': ca.remarks}</i></span>
	                        		</div>
	                        		<a href="javascript:;" onclick="setRemark(this);">描述</a>
	                        		<a href="javascript:;" onclick="delImg(this);">删除</a>
	                       		</li>
	                        	</c:forEach>
							</ul>
						</div>
					</dd>
				</dl>					
			
				<dl>
					<dt>名称</dt>
					<dd>
						<form:input path="name" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入名称" errormsg="请输入名称" sucmsg=" "/>
						<span class="Validform_checktip">*请输入名称</span>
					</dd>
				</dl>
				<dl>
					<dt>显示名称</dt>
					<dd>
						<form:input path="showName" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入显示名称" errormsg="请输入显示名称" sucmsg=" "/>
						<span class="Validform_checktip">*请输入显示名称</span>
					</dd>
				</dl>
				<dl>
					<dt>月龄</dt>
					<dd>
						<form:input path="monthAge" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入月龄" errormsg="请输入月龄" sucmsg=" "/>
						<span class="Validform_checktip">*请输入月龄</span>
					</dd>
				</dl>
				<dl>
					<dt>描述</dt>
					<dd>
						<form:input path="description" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" />
						<span class="Validform_checktip">*请输入描述</span>
					</dd>
				</dl>
				
				
			</div>
			<!--/内容-->
	
			<!--工具栏-->
			<div class="page-footer">
				<div class="btn-wrap">
					<input type="submit" name="btnSubmit" value="提交保存" id="btnSubmit" class="btn" /> 
					<input name="btnReturn" type="button" value="返回上一页" class="btn yellow" onclick="javascript:history.back(-1);" />
				</div>
			</div>
			<!--/工具栏-->
		</form:form>
	</body>
</html>

